<template>
  <div class="bg">
    <div class="title">
      <p>科学</p>
    </div>
    <div class="close">
      <router-link to="/chengbao"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav1">
      <router-link to="/chengbao/science1"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav2">
      <router-link to="/chengbao/science2"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav3">
      <router-link to="/chengbao/science3"><button class="btn_go"></button></router-link>
    </div>
    <div class="up">
    </div>
    <div class="down">
    </div>
    <div class="up1">
      <router-link v-show="up_link1" to="/chengbao/science1/scienceup1"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="up2">
      <router-link v-show="up_link1" to="/chengbao/science1/scienceup2"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="up3">
      <router-link v-show="up_link1" to="/chengbao/science1/scienceup3"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="up4">
      <router-link v-show="up_link1" to="/chengbao/science1/scienceup4"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="down1">
      <router-link v-show="down_link1" to="/chengbao/science1/sciencedown1"><button class="btn_go"></button></router-link>
      <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="down2">
      <router-link v-show="down_link1" to="/chengbao/science1/sciencedown2"><button class="btn_go"></button></router-link>
      <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="down3">
      <router-link v-show="down_link1" to="/chengbao/science1/sciencedown3"><button class="btn_go"></button></router-link>
      <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="down4">
      <router-link v-show="down_link1" to="/chengbao/science1/sciencedown4"><button class="btn_go"></button></router-link>
      <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="school">
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      up_link1: false,
      up_link2: true,
      down_link1: false,
      down_link2: true
    }
  },
  created () {
    console.log(this.$store.state.jurisdiction)
    if (this.$store.state.jurisdiction === 0) {
      alert('校验文件无效!')
    } else if (this.$store.state.jurisdiction === 1) {
      this.up_link1 = true
      this.up_link2 = false
    } else if (this.$store.state.jurisdiction === 2) {
      this.down_link1 = true
      this.down_link2 = false
    } else if (this.$store.state.jurisdiction === 3) {
      this.up_link1 = true
      this.up_link2 = false
      this.down_link1 = true
      this.down_link2 = false
    }
  },
  methods: {
    warntext: function () {
      alert('暂未开放！')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg{
  background:url(../../assets/science/1.0/1-assets/sciencebg_1.png) no-repeat;
  background-size:100%;
  height:720px;
  width:1280px;
  position: relative;
  text-align: center;
  margin:0 auto;
}
.btn_go{
  height:100%;
  width:100%;
  opacity: 0;
  cursor:pointer;
}
.title{
  width:10%;
  font-size: 36px;
  font-family: katong;
  position: absolute;
  top:20px;
  left:566px;
}
.close{
  background:url(../../assets/science/1.0/1-assets/close.png) no-repeat;
  height:70px;
  width:70px;
  position: absolute;
  top:10px;
  right:30px
}
.nav1{
  background:url(../../assets/science/1.0/1-assets/grade1.png) no-repeat;
  background-size: 100%;
  height:80px;
  width:355px;
  position: absolute;
  top:135px;
  left:90px;
}
.nav2{
  background:url(../../assets/science/1.0/1-assets/grade2_on.png) no-repeat;
  background-size: 100%;
  height:80px;
  width:355px;
  position: absolute;
  top:140px;
  left:455px;
}
.nav3{
  background:url(../../assets/science/1.0/1-assets/grade3_on.png) no-repeat;
  background-size: 100%;
  height:80px;
  width:355px;
  position: absolute;
  top:130px;
  left:820px;
}
.up{
  background:url(../../assets/science/1.0/1-assets/UP.png) no-repeat;
  height:80px;
  width:80px;
  position: absolute;
  top:250px;
  left:100px;
}
.down{
  background:url(../../assets/science/1.0/1-assets/DOWN.png) no-repeat;
  height:80px;
  width:80px;
  position: absolute;
  top:400px;
  left:100px;
}
.up1{
  background:url(../../assets/science/1.0/1-assets/t1.png) no-repeat;
  background-size: 70%;
  height:90px;
  width:60px;
  position: absolute;
  top:250px;
  left:268px;
}
.up2{
  background:url(../../assets/science/1.0/1-assets/t2.png) no-repeat;
  height:100px;
  width:60px;
  position: absolute;
  top:250px;
  left:515px;
}
.up3{
  background:url(../../assets/science/1.0/1-assets/t3.png) no-repeat;
  background-size: 80%;
  height:100px;
  width:60px;
  position: absolute;
  top:260px;
  left:765px;
}
.up4{
  background:url(../../assets/science/1.0/1-assets/t4.png) no-repeat;
  background-size: 80%;
  height:100px;
  width:80px;
  position: absolute;
  top:250px;
  left:1018px;
}
.down1{
  background:url(../../assets/science/1.0/1-assets/d1.png) no-repeat;
  background-size: 60%;
  height:90px;
  width:60px;
  position: absolute;
  top:380px;
  left:268px;
}
.down2{
  background:url(../../assets/science/1.0/1-assets/d2.png) no-repeat;
  background-size:100%;
  height:120px;
  width:60px;
  position: absolute;
  top:350px;
  left:510px;
}
.down3{
  background:url(../../assets/science/1.0/1-assets/d3.png) no-repeat;
  background-size:100%;
  height:90px;
  width:60px;
  position: absolute;
  top:380px;
  left:760px;
}
.down4{
  background:url(../../assets/science/1.0/1-assets/d4.png) no-repeat;
  background-size:80%;
  height:110px;
  width:60px;
  position: absolute;
  top:380px;
  left:1018px;
}
.school{
  background:url(../../assets/science/1.0/1-assets/animal.png) no-repeat;
  background-size: 100%;
  height: 200px;
  width: 700px;
  position: absolute;
  bottom: 30px;
  left: 300px;
}
</style>
